<template>
  <!--  <div>添加或修改sku</div>-->
  <el-form label-width="80px" :model="spu">
    <el-form-item label="SPU名称">
      <el-input placeholder="请输入SPU名称" v-model="spu.spuName"></el-input>
    </el-form-item>
    <el-form-item label="品牌">
      <el-select placeholder="请选择" v-model="spu.tmId">
        <el-option :label="tm.tmName" :value="tm.id" v-for="tm in tradeMarkList" :key="tm.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述">
      <el-input type="textarea" rows="4" v-model="spu.description"/>
    </el-form-item>
    <el-form-item label="SPU图片">
      <!--
      action:图片上传的地址
      list-type:文件列表的类型(当前为照片墙)
      file-list：图片数据源,是一个数组，数组里面的元素，必须要有name，url属性
      on-preview：图片预览时的回调
      on-remove：图片删除时间的回调
      -->
      <el-upload
          action="http://gmall-h5-api.atguigu.cn/admin/product/fileUpload"
          list-type="picture-card"
          :file-list="spuImageList"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
      >
        <el-icon>
          <Plus/>
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image"/>
      </el-dialog>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-select :placeholder="`还有${unSelectSaleAttr.length}个未选择`" v-model="attrIdAndAttrName">
        <el-option :label="unselect.name" :value="`${unselect.id}:${unselect.name}`"
                   v-for="unselect in unSelectSaleAttr"
                   :key="unselect.id"></el-option>
      </el-select>
      <el-button style="margin-left: 10px" type="success" :disabled="!attrIdAndAttrName" @click="addSaleAttr">
        <el-icon>
          <Plus/>
        </el-icon>
        添加销售属性
      </el-button>
      <!--table展示的是当前spu属于自己的销售属性-->
      <el-table style="margin-top: 10px" border :data="spu.spuSaleAttrList">
        <el-table-column type="index" label="序号" width="80px"></el-table-column>
        <el-table-column label="属性名" prop="saleAttrName"></el-table-column>
        <el-table-column label="属性值名称列表">
          <template v-slot="{row}">
            <el-tag v-for="(tag,index) in row.spuSaleAttrValueList" :key="tag.id" closable :disable-transitions="false"
                    @close="row.spuSaleAttrValueList.splice(index,1)">
              {{ tag.saleAttrValueName }}
            </el-tag>
            <!--el-input和el-button需要进行切换-->
            <el-input v-if="row.inputVisible" ref="InputRef" v-model="row.inputValue" size="small"
                      @blur="handleInputConfirm(row)"/>
            <el-button type="primary" v-else class="button-new-tag ml-1" size="small" @click="addSaleAttrValue(row)">添加
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{$index}">
            <el-button type="danger" size="small" @click="spu.spuSaleAttrList.splice($index,1)">
              <el-icon>
                <Delete/>
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addOrUpdateSpu">保存</el-button>
      <el-button type="warning" @click="changeDiv">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {reqAddOrUpdateSpu, reqBaseSaleAttrList, reqSpu, reqSpuImageList, reqTradeMarkList} from "../api/realRequests";
import {ElMessage} from "element-plus";

export default {
  name: "SkuForm",
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      /*
      * 存储spu信息,spu属性初始化的时候是一个空的对象,在修改spu的时候，会向服务器发请求，服务器会返回一个spu信息(对象)，
      * 在修改的时候,利用服务器返回的这个对象收集最新的数据提交给服务器
      * 在添加spu时,并没有向服务器发请求，数据收集到哪里???所以此时收集数据的时候,有哪些字段，需要看文档，并在初始的spu空对象中写好
      * */
      spu: {
        // 三级分类的id
        category3Id: 0,
        // 描述
        description: '',
        // spu名称
        spuName: '',
        // 平台的id
        tmId: '',
        // 收集spu图片的信息
        spuImageList: [],
        // 平台属性与属性值收集
        spuSaleAttrList: []
      },
      // 存储品牌信息
      tradeMarkList: [],
      // 存储spu图片
      spuImageList: [],
      // 销售属性的数据
      saleAttrList: [],
      // 收集未选择的销售属性的id
      attrIdAndAttrName: ''
    }
  },
  methods: {
    // 照片墙图片预览的回调
    handlePictureCardPreview(file) {
      // 将图片的实际地址赋值给dialogImageUrl这个属性
      this.dialogImageUrl = file.url
      // 显示图片预览框
      this.dialogVisible = true
    },
    // 照片墙图片删除时的回调,file:删除的那张图片，fileList:删除过后,照片墙上剩余的所有图片
    handleRemove(file, fileList) {
      // 收集删除过后，照片墙的最新数据
      this.spuImageList = fileList
    },
    // 照片墙上传成功的回调，respone：添加的结果，file:添加的那张图片，fileList:添加过后,照片墙上所有的图片
    handleSuccess(respone, file, fileList) {
      // console.log(respone)
      // console.log(file)
      // console.log(fileList)
      // 收集添加图片后，照片墙的最新数据
      this.spuImageList = fileList
    },
    // 添加新的销售属性
    addSaleAttr() {
      // 把收集到的销售属性数据进行分割
      const a = this.attrIdAndAttrName.split(':')[0]
      const b = this.attrIdAndAttrName.split(':')[1]
      // 声明一个中间对象，把切割后的数据添加给这个对象
      let newSaleAttr = {
        baseSaleAttrId: a,
        saleAttrName: b,
        spuSaleAttrValueList: []
      }
      // 向spu对象的spuSaleAttrList属性中添加新的 销售属性(也就是上方的对象)
      this.spu.spuSaleAttrList.push(newSaleAttr)
      // 清空选择框数据
      this.attrIdAndAttrName = ''
    },
    // 取消按钮
    changeDiv() {
      this.$emit('changeScene')
    },
    // 初始化表单数据
    async initSpuData(canshu) {
      // console.log('发请求了',canshu)
      // 获取spu信息的数据
      let spuResult = await reqSpu(canshu.id)
      if (spuResult.code == 200) {
        this.spu = spuResult.data
      }
      // 获取品牌的信息
      let tradeMarkResult = await reqTradeMarkList()
      // console.log(tradeMarkResult)
      if (tradeMarkResult.code == 200) {
        this.tradeMarkList = tradeMarkResult.data
      }
      // 获取spu图片
      let spuImageResult = await reqSpuImageList(canshu.id)
      // console.log(spuImageResult)
      if (spuImageResult.code == 200) {
        //由于照片墙显示图片的数据需要数组，数组里面的元素需要有name与url字段，所以需要把服务器返回的数据中的属性名进行修改
        // 临时数组middleArray
        let middleArray = spuImageResult.data
        middleArray.forEach(item => {
          item.name = item.imgName
          item.url = item.imgUrl
        })
        // 处理好后，在把数组赋值给绑定的数组
        this.spuImageList = middleArray
      }
      // 获取平台全部的销售属性
      let saleAttrResult = await reqBaseSaleAttrList()
      if (saleAttrResult.code == 200) {
        this.saleAttrList = saleAttrResult.data
      }
    },
    // 添加销售属性的值
    addSaleAttrValue(row) {
      // 当点击销售属性值当中的添加按钮的时候，需要由button变为input
      // console.log(row)
      row.inputVisible = true
      row.inputValue = ''
    },
    // 输入框失焦时
    handleInputConfirm(row) {
      // 结构出销售属性中收集的数据
      const baseSaleAttrId = row.baseSaleAttrId
      const inputValue = row.inputValue
      // 新增的属性值不能为空
      if (inputValue.trim() == '') {
        ElMessage({message: '属性值不能为空！', type: 'warning', duration: 2000})
        return
      }
      // 属性值不能重复(some:只要找到一个满足条件的值，就返回true)
      let result = row.spuSaleAttrValueList.some(item => item.saleAttrValueName === inputValue)
      // console.log(result)
      if (result) {
        ElMessage({message: '属性值不能重复！', type: 'warning', duration: 2000})
        return
      }
      // 新增的销售属性值
      let newSaleAttrValue = {
        baseSaleAttrId: baseSaleAttrId,
        saleAttrValueName: inputValue
      }
      // 新增
      row.spuSaleAttrValueList.push(newSaleAttrValue)
      // 修改inputVisible为false,由input变为button
      row.inputVisible = false
    },
    // 保存
    async addOrUpdateSpu() {
      // 整理参数，需要整理照片墙的字段
      // 携带参数：对于图片，需要携带imageName和imageUrl字段
      this.spu.spuImageList = this.spuImageList.map(item => {
        return {
          imgName: item.name,
          // 新添加的图片和原本已有的图片，数据结构不一样，需要判断，并取出对应的值
          imgUrl: (item.response && item.response.data) || item.url
        }
      })
      let res = await reqAddOrUpdateSpu(this.spu)
      console.log(res)
      // 结果
      if (res.code == 200) {
        ElMessage({message: '保存成功！', type: 'success', duration: 2000, center: true})
        // 通知父组件切换到场景0
        this.$emit('changeScene')
      }
    },
    // 父组件点击添加spu按钮时，会触发这个函数
    async addSpuData(data) {
      // 清除数据
      this.spu = {}
      // 将父组件传过来的三级分类的id进行赋值
      this.spu.category3Id = data
      // 获取品牌的信息
      let tradeMarkResult = await reqTradeMarkList()
      // console.log(tradeMarkResult)
      if (tradeMarkResult.code == 200) {
        this.tradeMarkList = tradeMarkResult.data
      }
      // 获取平台全部的销售属性
      let saleAttrResult = await reqBaseSaleAttrList()
      if (saleAttrResult.code == 200) {
        this.saleAttrList = saleAttrResult.data
      }
    }
  },
  computed: {
    // 计算出还未选择的销售属性
    unSelectSaleAttr() {
      let result = this.saleAttrList.filter(item => {
        return this.spu.spuSaleAttrList.every(item1 => {
          return item.name != item1.saleAttrName
        })
      })
      return result
    }
  }
}
</script>

<style scoped>

</style>